<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素样式操作</title>
		<!-- 元素样式操作：直接操作元素的样式下的属性和属性值 
		css()           功能--
						1个参：传入css属性名
						功能：获取匹配元素集合中第一个元素的css属性值
						2个参：传入css属性名和属性值
						功能：设置匹配元素集合中第一个元素的css属性值
						n个参：传入多个css属性名和属性值
						语法糖：css({"属性名":"属性值",
								    "属性名":"属性值",
									......
									"属性名":"属性值",
									})
		width()和height()  功能：匹配元素集合中第一个元素宽高度
							无参：获取匹配元素集合中第一个元素宽高度
							有参：设置匹配元素集合中第一个元素宽高度
		outerWidth()和outerHeight()
		出现原因：元素存在盒子中，盒子模型，宽度计算方式：内外边距+边框+内容
		无参：获取元素的宽高度，计算盒子模型：内边距+边框
		有参：传入bool值，true时，计算盒子模型：内外边距+边框
		-->
		<style>
			.box{
				background-color: #70ee85;
				padding: 20px;
				margin: 20px;
				border: 5px solid red;
			}
			.result{
				margin-top:10px ;
				font-weight: 3px;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- 创建俩个div平行  6个按钮 -->
		<!-- css：  .box添加样式：背景颜色、内外边距：20px  边框5px
					.result添加样式：上外边距：10px，字体加粗-->
		<!-- 1.显示效果区域 -->
		<div class="box" id="targetBox"></div>
			<button id="getColorbtn">获取颜色属性值</button>
			<button id="setColorbtn">设置颜色效果 </button>
			<button id="setBtn">设置多属性效果</button>
			<button id="gsBtn">获取元素宽度/设置元素宽度</button>
			<button id="bpBtn">获取高度（内边距+边框）</button>
			<button id="bpmbtn">获取高度（内外边距+边框）</button>
			<!-- 2.结果提示功能区域 -->
		<div class="result" id="result"></div>
		<script>
			/*1.点击 获取颜色属性值 按钮  获取颜色值并打印在页面上*/
			$("#getColorbtn").click(function(){
				//获取css属性值方式：传入属性名即可
				var bgColor=$(".box").css("background-color");
				//页面上打印属性值？？
				$("#result").text("获取的属性值是："+bgColor)
			});
			/*2.点击 设置颜色效果 按钮  设置颜色值并打印在页面上*/
			$("#setColorbtn").click(function(){
				//改成橙色
				$(".box").css("background-color","orange");
				$("#result").text("改变后颜色为：橙色")
			});
			/*3.点击 设置多属性效果 按钮 圆、背景色、阴影*/
			 $("#setBtn").click(function(){
			 	$(".box").css({ "background-image":"url(../img)",
								"background-color":"#9898ff",
			 				    "border":"5px solid #f00",
								"width":"300px",
								"heigth":"300px",
								"background-size":"100% 100%",
								"border-radius":"50%",
								"box-shadow":"5px 5px 10px #b4fffa"					
								});
			 });
			 /*4.点击  获取、设置宽度 */
			 $("#gsBtn").click(function(){
				 var w=$(".box").width();
				 $("#result").text("获取的宽度是："+w)
			 });
			 /*5.点击  获取高度  按钮  计算box空间高度*/
			 $("#bpBtn").click(function(){
				 var bp=$(".box").outerHeight(true);
				 $("#result").text("获取高度为："+bp+"px");
			 });
			 $("#bpmbtn").click(function(){
			 	 var bpm=$(".box").outerWidth();
			 	 $("#result").text("获取高度为："+bpm+"px");
			 });
		</script>
	</body>
</html>